文章同步更新在 Codefictionist

說到 CSS 的變形，大家都會聯想到 transform 這個屬性，這個屬性可以讓我們對元素進行旋轉、縮放、移動和傾斜等效果。
基本上，對於部分前端工程師來說，transform 這個屬性也不是很陌生，有一道經典的面試考題是這樣的：

請問如何將原素做置中效果？

這題答案有好幾個，我們不討論 flex 或 grid 的方式，我們來談談 transform：

<div class="parent position">
 <div></div>
</div>

.parent {
 border: black solid 3px;
 width: 20vw;
 aspect-ratio: 1;
 position: relative;

 div {
  border: red solid 2px;
  width: 5vw;
  aspect-ratio: 1;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
}

範例 - 用 position 搭配 transform 做元素置中

在上述的例子中，如果僅透過 position: absolute; 來做置中，我們會發現是元素的左上角會被置中，而不是元素的中心點被置中。
這時後透過 transform: translate(-50%, -50%);，使元素向左及向右各移動自身寬度的一半，就可以達到元素的中心點被置中的效果。
這就是 transform 的一個常見應用。

transform 的大家族

transform 當然不只有 translate 一個方法，還有非常多的方法可以讓我們對元素進行變形，我做了一個簡表：

範例 - transform 家族

transition 又是什麼？

如果你夠細心，你會發現 transform 的變形是在瞬間完成的，這樣的效果有時候會讓人感到突兀，這時候就可以使用 transition 來讓變形的過程變得平滑。
基本的 transition 寫法如下：

.element {
 transition: property duration timing-function delay;
}

• property：指定要變化的 CSS 屬性，例如 transform。
• duration：指定變化的時間，例如 1s。
• timing-function：指定變化的速度曲線，例如 ease-in-out。
• delay：指定變化的延遲時間，例如 2s。

現在來看個實際例子，在這個例子中，當滑鼠懸停在元素上時，元素的寬度會從 100px 變成 200px，並且會在 1 秒內完成，且會有 2 秒的延遲時間：

.element {
 width: 100px;
 height: 100px;
 background-color: red;
 transition: width 1s ease-in-out 2s;
}

.element:hover {
 width: 200px;
}

範例 - transition

Reference

1. W3 schools - 2D Transform
2. W3 schools - 3D Transform
3. W3 schools - Transitions